<template>
	<div class="sharetb">
		
		<div class="background">
			<div class="backgroundimg"><img :src="goods.image"></div>
			<div class="goodsS">
				<div class="Name">
					{{goods.name}}
				</div>
				<div class="priceB">
					<div class="priceB_l">
						<div>原价￥{{goods.price}}</div>
						<div>红包劵￥{{goods.couponMoney}}</div>
					</div>
					<div class="priceB_r">
						￥{{goods.conPrice}}
					</div>
				</div>
				<div class="commandS">淘口令：{{goods.tkl}}</div>
			</div>
			<div class="backgroundimgS"><img src="../assets/background.png"></div>
		</div>
		
		<div class="goods"> 
			<div class="goodsdetails">
				<div class="goodsdetailsimg">
					<img :src="goods.image">
				</div>
				<div class="goodsintroduce">
					<div class="goodsName">{{goods.name}}</div>
					<div class="price">
						<div class="price_l">
							<div>原价￥{{goods.price}}</div>
							<div>红包劵￥{{goods.couponMoney}}</div>
						</div>
						<div class="price_r">
							劵后价￥{{goods.conPrice}}
						</div>
					</div>
					<div class="command"><span>复制此淘口令打开淘宝APP</span><br> 淘口令:{{goods.tkl}}</div>
				</div>
			</div>
			
			<div class="bottom">
				<div class="tag-read" :data-clipboard-text="goods.tkl" @click="copy">复制淘口令</div>
				<!--<div @click="returnon">返回</div>-->
			</div>
			
		</div>
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import Clipboard from 'clipboard';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				id:'',
				goods:[],
			}
		},
		created(){
			this.id = this.$route.query.id;
			//商品
			var url = BaseUrl + 'share/singleTbView?id=' + this.id
			this.$http.get(url).then(res=>{
				if(res.data.code == '10000'){
					this.goods = res.data.data;
				}
				
			}).catch(error=>{
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
		},
		methods:{
			//复制淘口令
			copy:function(){
		        var clipboard = new Clipboard('.tag-read')
		        clipboard.on('success', e => {
		          	Toast({
						message: '复制成功',
						position: 'middle',
						duration: 3000
					});
		          clipboard.destroy()
		        })
		        clipboard.on('error', e => {
		          	Toast({
						message: '该浏览器不支持自动复制',
						position: 'middle',
						duration: 3000
					});
		          clipboard.destroy()
		        })
			}
		}
	}
</script>

<style scoped="scoped">
	.backgroundimg{
		width: 100%;
		height: 7.5rem;
	}
	.backgroundimg img{
		width: 100%;
		height: 100%;
	}
	.priceB{
		display: flex;
		justify-content: space-between;
		border-bottom:1px solid #CBCBCB;
		padding: 0.16rem 0.25rem 0.13rem 0.25rem ;
	}
	.priceB_l{
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #ABABAB;
		letter-spacing: 0;
	}
	.commandS{
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #ABABAB;
		letter-spacing: 0;
		padding: 0.15rem 0.25rem;
	}
	.priceB_r{
		font-family: PingFangSC-Medium;
		font-size: 0.34rem;
		color: #FF2040;
		letter-spacing: 0;
		display: flex;
		flex-direction: column-reverse;
	}
	.Name{
		font-family: PingFangSC-Regular;
		font-size: 0.3rem;
		color: #000000;
		letter-spacing: 0;
		height: 1rem;
		overflow: hidden;
	  	text-overflow:ellipsis;
	  	display: -webkit-box;
	  	-webkit-line-clamp: 2;
	  	-webkit-box-orient: vertical;
	  	margin:  0.4rem 0.25rem;
	}
	.backgroundimgS{
		width: 100%;
		height: 1rem;
		position: absolute;
		bottom: 0;
	}
	.backgroundimgS img{
		width: 100%;
		height: 100%;
		display: flex;
	}
	.sharetb{
		width: 100%;
		height: 100%;
	}
	.goods{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		top: 0;
	}
	.goodsdetails{
		position: relative;
		top: 5%;
		background: #fff;
		left: 0;
		margin: 0 0.2rem;
		box-sizing: border-box;
		z-index: 99;
		border-radius: 0.08rem;
	}
	.goodsdetailsimg{
		width: 100%;
		height: 5.93rem;
	}
	.goodsdetailsimg img{
		width: 100%;
		height: 100%;
	}
	.goodsintroduce{
		padding: 0.24rem;
	}
	.goodsName{
		font-family: PingFangSC-Regular;
		font-size: 0.26rem;
		color: #000000;
		letter-spacing: 0;
		height: 0.8rem;
		overflow: hidden;
	  	text-overflow:ellipsis;
	  	display: -webkit-box;
	  	-webkit-line-clamp: 2;
	  	-webkit-box-orient: vertical;
	}
	.price{
		display: flex;
		justify-content: space-between;
		border-bottom:1px solid #CBCBCB;
		padding: 0.16rem 0 0.13rem 0 ;
	}
	.price_l{
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #ABABAB;
		letter-spacing: 0;
	}
	.price_r{
		font-family: PingFangSC-Medium;
		font-size: 0.34rem;
		color: #FF2040;
		letter-spacing: 0;
		display: flex;
		flex-direction: column-reverse;
	}
	.command{
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #ABABAB;
		letter-spacing: 0;
		padding: 0.15rem 0;
		text-align: center;
	}
	.command span{
		color: #ff2040;
	}
	.bottom{
		display: flex;
		justify-content: center;
		position: absolute;
		width: 100%;
		bottom: 0.5rem;
	}
	.bottom div{
		margin: 0 0.2rem;
		background: #FF2040;
		border-radius: 0.3rem;
		width: 98%;
		height: 0.68rem;
		font-family: PingFangSC-Regular;
		font-size: 0.28rem;
		text-align: center;
		line-height: 0.68rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
</style>